<!DOCTYPE html>
<html>
<head>
	<!-- user-scalable makes pinch to zoom unsupported on this web page -->
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	
	<link type="text/css" href="lib/jquery/css/trontastic/jquery-ui-1.8.6.custom.css" rel="stylesheet" />	
	<link rel="stylesheet" href="css/geo-sim.css" type="text/css" />
	
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="lib/jquery/js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="lib/jquery/js/jquery-ui-1.8.6.custom.min.js"></script>
	<script type="text/javascript" src="lib/geo_simulator.js"></script>
	<script type="text/javascript" src="lib/geo_broadcast.js"></script>
	<script type="text/javascript" src="lib/simulation.js"></script>
	
	
</head>

<body>
	<div id="control_panel">
		&nbsp;
		<a id="userInfo" alt="{{ email }}" href="{{ logoutURL }}">Connected as <b>{{ nickname }}</b></a>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Mode:
		<select id="simul_mod">
			<option	value=1 >Manual</option>
			<option	value=2 >Automatic Simulator</option>
			<option value=3 >Live GPS</option>
		</select>
		 &nbsp;Speed: 
		<select id="simul_speed" style="outline: none;">
			<option value="legal" selected="true">Legal speed</option>
			<option	value="2" >2 Km/Hr</option>
			<option	value="5" >5 Km/Hr</option>
			<option	value="10" >10 Km/Hr</option>
			<option	value="20" >20 Km/Hr</option>
			<option	value="40" >40 Km/Hr</option>
			<option value="60">60 Km/Hr</option>
			<option value="80" >80 Km/Hr</option>
			<option value="100" >100 Km/Hr</option>
			<option value="120" >120 Km/Hr</option>
			<option value="150" >150 Km/Hr</option>
			<option value="200" >200 Km/Hr</option>
		</select>
		&nbsp;&nbsp;
		<span id="createRoadBtn" class="imgBtn createIcon">Create Road</span>&nbsp;
		<span id="newSimulBtn" class="imgBtn newIcon">New Simulation</span>&nbsp;
		<span id="runSimuBtn" class="imgBtn runIcon">Run</span>&nbsp;
		<span id="followBtn" class="imgBtn followIcon"  style="display: none;">Track</span>
		
		<span id="rightPanelSide">
			<span id="satDishIcon" class="barIcon satDishIcon hidden"></span> 
			<a id="bcast_enable_btn" class="bcastOff">Offline</a>&nbsp;
			Interval: 
			<select id="bcast_interval">
				<option	value="triggered" selected="true">Triggered</option>
				<option	value="5" >5 seconds</option>
				<option	value="10" >10 seconds</option>
				<option	value="30" >30 seconds</option>
				<option	value="60"  >1 minute</option>
				<option	value="120" >2 minutes</option>
				<option	value="300" >5 minutes</option>
				<option	value="600" >10 minutes</option>
				<option	value="1800" >30 minutes</option>
			</select>
			&nbsp;
		</span>
	</div>
	<div id="map_canvas" style="width:100%; height:100%"></div>
	<div id="info_bar" class="hidden">
		<b>Distance</b> : <span id="distanceInfo">0 Km</span> &nbsp;|&nbsp; <b>Time</b> : <span id="timeInfo">00:00</span> &nbsp;|&nbsp; <b>Avg Speed</b> : <span id="speedInfo">0 km/hr</span> 
	</div>
</body>
</html>